<template>
  <div class="city">
    <!-- 搜索框 -->
    <div class="top">
      <van-search v-model="searchValue" shape="round" placeholder="城市/区域/位置" show-action @cancel="cancelClick"/>
      <van-tabs v-model:active="tabActive" color="#ff9854">
        <template v-for="(value, key, index) in allCities" :key="key">
          <van-tab :title="value.title" :name="key"></van-tab>
        </template>   
      </van-tabs>
    </div>
    <div class="content">
      <template v-for="(value, key, index) in allCities" :key="index">
        <city-group v-show="tabActive === key" :group-data="value"/>
      </template>
    </div>
  </div>
</template>

<script setup>
  import { ref, computed } from 'vue'
  import { useRouter } from 'vue-router'
  import { getCityAll } from '@/service'
  import useCityStore from '@/store/modules/city'
  import { storeToRefs } from 'pinia'
  import cityGroup from './cpns/city-group.vue'

  const router = useRouter()
  const searchValue = ref("")

  const cancelClick = () => {
    router.back()
  }
  const tabActive = ref("cityStore")
  // const allCity = ref({})
  // getCityAll().then(res=> {
  //   allCity.value = res.data
  // })
  const cityStore = useCityStore()
  cityStore.fetchAllCitiesData()
  const { allCities } = storeToRefs(cityStore)

  const currentGroup = computed(()=> allCities.value[tabActive.value])

</script>

<style lang="less" scoped>
.city{
  .top{
   position: relative;
   z-index: 9;
  }
  .content {
    height: calc(100vh - 98px);
    overflow-y: auto;
  }
}
</style>
